 <!-- 
   VR 全景
  -->
  <template>
    <div ref="Cavans"></div>
</template>
<script setup>
import { resizeHandler, THREE } from '@/utils/threejs'
// import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { OrbitControls } from 'three/addons/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module';
import px from '@/assets/px.png'
import nx from '@/assets/nx.png'
import ny from '@/assets/ny.png'
import nz from '@/assets/nz.png'
import py from '@/assets/py.png'
import pz from '@/assets/pz.png'

const Cavans = ref(null)
const count = ref(0)
// 创建一个场景
const scene = new THREE.Scene()
// 创建一个透视投影相机相机  PerspectiveCamera 
const camera = new THREE.PerspectiveCamera( 75, document.body.clientWidth / document.body.clientHeight, 0.1, 100 )
scene.add(camera)
// 渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true, // 抗锯齿
})
// 优化 设置像素比
renderer.setPixelRatio(window.devicePixelRatio || 1)
// 渲染器的尺寸
renderer.setSize(document.body.clientWidth, document.body.clientHeight)
// geometry 几何体 创建一个立方体 BoxGeometry
const geometry = new THREE.BoxGeometry( 10, 10, 10 )
// 六张vr分割的图片
const vrImgList = [px, nx, py, ny, pz, nz]
const faces = []
for(let i = 0; i < geometry.groups.length; i++){
    const vrTexture = new THREE.TextureLoader().load(`${vrImgList[i]}`)
    const material = new THREE.MeshBasicMaterial({
            map: vrTexture,
            // wireframe: true
        })
    faces.push(material)
}
// Mesh 网格  网格包含一个几何体 geometry 以及作用在此几何体上的材质 material
const cube = new THREE.Mesh( geometry, faces );
// 调用 scene.add()，物体将会被添加到 (0,0,0) 坐标
scene.add(cube)
cube.geometry.scale(-5, 5, 5);
camera.position.x = 5
const controls = new OrbitControls(camera, renderer.domElement) 
// 将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。 请注意，如果该值被启用，你将必须在你的动画循环里调用update()
controls.enableDamping = true 
// 当.enableDamping设置为true的时候，阻尼惯性有多大。 Default is 0.05. 请注意，要使得这一值生效，你必须在你的动画循环里调用 update()
controls.dampingFactor = 1
// 添加性能监控器
const stats = new Stats()
stats.setMode(0)
const animate = () => {
    // 浏览器API
	requestAnimationFrame( animate );
    controls.update() // 更新轨道控制器 
    stats.update() // 更新监控帧数
	renderer.render( scene, camera );
}
animate();
// 自适应
resizeHandler(renderer, camera)

onMounted(()=>{
    // 挂载
    Cavans.value.appendChild(renderer.domElement)
    Cavans.value.appendChild(stats.domElement)
})
</script>
